import React, { useEffect, useLayoutEffect, useMemo } from 'react'
import * as echarts from 'echarts'
import styles from './index.module.less'

let id = 1
const fontSize = 13
export default function Radar({ data }: { data: { name: string; score: any }[] }) {
    const echardId = useMemo(() => {
        id = id + 1
        return id
    }, [])
    useLayoutEffect(() => {
        if (!data?.length) {
            return
        }
        const dom: any = document.getElementById(`echart_${echardId}`)
        const myChart = echarts.init(dom)
        const values = data

        const indicatorArr = values?.map((item: { name: string; score: any }, index) => {
            let nameGap = 10

            if ([2, 3, 7, 8].includes(index)) {
                switch (item?.name?.length) {
                    case 4:
                        nameGap = 26
                        break
                    case 6:
                        nameGap = 14
                        break
                    default:
                        break
                }
            }
            return {
                name: item?.name,
                max: 100,
                value: `${item?.score}`,
                index,
                nameGap,
                axisLabel:
                    index === 0
                        ? {
                              show: true,
                              formatter: function (value: any, idx: number) {
                                  if ([0, 3, 5, 8, 10].includes(idx)) {
                                      return value
                                  }
                                  return ''
                              },
                              fontSize: 10,
                              color: '#4E95F2',
                              zIndex: 10,
                          }
                        : null,
            }
        })

        const indicatoValue = values?.map((item: { score: any }) => {
            return item.score
        })
        const myChartConfig: any = {
            radar: {
                axisName: {
                    show: true,
                    formatter(value: any, indicator: { value: any; index: number }) {
                        console.log(indicator)
                        if ([2, 3, 7, 8].includes(indicator.index) && value.length > 3) {
                            const text = value.split('')
                            text.splice(Math.floor(value.length / 2), 0, '\n')
                            return text.join('')
                        }
                        return value
                    }, // 指示器标签名称
                    color: 'rgba(23,26,29,0.6)', // 指示器标签字体颜色
                    fontFamily: 'PingFangSC-Regular, PingFang SC', // 指示器标签字体
                    fontSize, // 指示器标签字体大小
                    fontWeight: 400, // 指示器标签字体字号
                    overflow: 'breakAll', // 指示器标签换行，
                    lineHeight: 22, // 指示器标签行高
                    rich: {
                        time: {
                            fontSize,
                            fontFamily: 'PingFangSC-Regular, PingFang SC',
                            fontWeight: 400,
                            width: 10,
                        },
                    }, // 指示器标签富文本样式可以用来换行显示
                },
                center: ['50%', '50%'], // 雷达图整体位置
                radius: '65%', // 雷达图整体大小
                splitNumber: 10, // 雷达图显示几个圈
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#B5D4FF',
                    },
                }, // 雷达图连接标签的线条
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#B5D4FF',
                        width: 1,
                    },
                }, // 雷达图一圈一圈的线条

                splitArea: {
                    show: false,
                }, // 雷达图内容区域颜色
                indicator: indicatorArr, // 雷达图标签名字，和标签最大最小，距离雷达图位置
            },
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                    {
                        offset: 0,
                        color: '#FCC91D', // 0% 处的颜色
                    },
                    {
                        offset: 1,
                        color: '#FCC91D', // 100% 处的颜色
                    },
                ],
                global: false, // 缺省为 false
            }, // 雷达图链接线颜色
            series: [
                {
                    name: '维度雷达图', // 雷达图名字
                    type: 'radar', // 雷达图类型
                    data: [
                        {
                            value: indicatoValue, // 雷达图数据
                            name: '维度数据', // 雷达图数据名字
                            areaStyle: {
                                color: 'rgba(78, 149, 242, 0.20)',
                            },
                        },
                    ],

                    lineStyle: {
                        width: 3, // 雷达图链接线条宽度
                        cap: 'round', // 雷达图链接线条颜色使用方式
                        color: '#4E95F2',
                    },
                    symbol: 'none', // 雷达图表示点
                },
            ], // 雷达图链接线颜色
        }
        myChart.setOption(myChartConfig)
    }, [data])

    return (
        <div className={styles.echarts_wrapper}>
            <div className={styles.echart_block} id={`echart_${echardId}`} />
        </div>
    )
}
